<script setup lang="ts">
import HeaderNav from '@/components/common/HeaderNav.vue';
</script>

<template>
    <div class="box">
        <HeaderNav />
        <div class="main">
            <div class="content">
                <div class="content-item">
                    <div class="options">
                        <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1">
                            <div class="shadow"></div>
                        </div>
                        <div class="option" style="--optionBackground:url(../images/pic2.jpeg);" id="item2">
                            <div class="shadow"></div>
                        </div>
                        <div class="option" style="--optionBackground:url(../images/pic3.jpeg);" id="item3">
                            <div class="shadow"></div>
                        </div>
                        <div class="option" style="--optionBackground:url(../images/pic4.jpeg);" id="item4">
                            <div class="shadow"></div>
                        </div>
                        <div class="option" style="--optionBackground:url(../images/pic5.jpeg);" id="item5">
                            <div class="shadow"></div>
                        </div>
                    </div>
                </div>
                <div class="content-item"></div>
                <div class="content-item"></div>
                <div class="content-item"></div>
            </div>
            <router-view v-slot="{ Component }">
                <transition name="router_animate">
                    <component :is="Component" />
                </transition>
            </router-view>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;

.box {
    height: auto;
    width: 100%;
    margin: 0 0;

    .main {
        // height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #d7d8ce;

        .content {
            position: fixed;
            top: $item-height*1.5;
            left: $item-height*4;
            width: $item-width*12;
            height: $item-height*12;
            background-color: rgb(53, 80, 53);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .content-item {
                width: $item-width*6;
                height: $item-height*6;
                background-color: rgb(145, 180, 157);
            }
        }
    }
}


.router_animate-enter-active {
    animation: backInDown 1s;
}

.router_animate-leave-active {
    animation: backOutDown 0.6s;
}
</style>
